<script lang="ts">
  import { onMount } from "svelte";
  import * as echarts from "echarts";

  let chartDom: HTMLDivElement;
  let myChart: echarts.ECharts;

  export let dpFictitiousStatisticsData: Record<string, any>[] = [];

  // 基准分辨率
  const baseHeight = 1080;
  let scale = 1;

  // 计算缩放比例
  const calculateScale = () => {
    const currentHeight = window.innerHeight;
    if (currentHeight < baseHeight) {
      scale = currentHeight / baseHeight;
    } else {
      scale = 1;
    }
    return scale;
  };

  // 生成从今天开始到之前7天的日期
  const getLast7Days = () => {
    const dates = [];
    const today = new Date();
    const options:any = { month: '2-digit', day: '2-digit', weekday: 'short' };
    for (let i = 0; i < 7; i++) {
      const date = new Date(today);
      date.setDate(today.getDate() - i);
      const formattedDate = date.toLocaleDateString('zh-CN', options);
      dates.push(formattedDate);
    }
    return dates.reverse();
  };

  const createOption = () => {
    // 计算当前缩放比例
    calculateScale();
    
    return {
      textStyle: {
        fontSize: Math.max(10, Math.round(14 * scale)),
        fontWeight: 'bold',
      },
      grid: {
        top: Math.max(15, Math.round(20 * scale)),
        bottom: 0,
        left: 0,
        right: 0,
        containLabel: true
      },
      xAxis: {
        type: "category",
        data: getLast7Days(),
        axisLabel: {
          formatter: function(value: string) {
            const datePattern = /(\d{2}\/\d{2})(周.)/;
            const matches = value.match(datePattern);
            if (matches && matches.length > 2) {
              return matches[1] + '\n' + matches[2];
            }
            return value;
          },
          fontSize: Math.max(8, Math.round(12 * scale)),
          interval: 1
        },
      },
      yAxis: {
        type: "value",
        splitNumber: 3,
        axisLabel: {
          fontSize: Math.max(8, Math.round(12 * scale)),
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: [
              'transparent',
              'rgba(255, 255, 255, 0.1)',
              'rgba(255, 255, 255, 0.1)',
              'rgba(255, 255, 255, 0.1)',
              'rgba(255, 255, 255, 0.1)'
            ]
          }
        }
      },
      series: [
        {
          data: dpFictitiousStatisticsData.map(item => item.orderCount) || [0, 0, 0, 0, 0, 0, 0],
          type: "bar",
          barWidth: Math.max(10, Math.round(28 * scale)),
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#18D3EC" },
                { offset: 1, color: "rgba(82,199,244,0)" },
              ],
            },
          },
          label: {
            show: true,
            position: "top",
            color: "rgba(255,255,255,0.6)",
            fontSize: Math.max(8, Math.round(12 * scale)),
          },
        },
      ],
    };
  };

  onMount(() => {
    // 初始化图表
    myChart = echarts.init(chartDom);
    myChart.setOption(createOption());

    // 处理窗口大小变化
    const resizeHandler = () => {
      myChart?.resize();
      // 更新图表配置以应用新的缩放比例
      myChart?.setOption(createOption(), true);
    };
    
    window.addEventListener("resize", resizeHandler);

    return () => {
      window.removeEventListener("resize", resizeHandler);
      myChart?.dispose();
    };
  });

  // 添加响应式声明，监听数据变化
  $: if (myChart && dpFictitiousStatisticsData.length > 0) {
    const option = createOption();
    option.series[0].data = dpFictitiousStatisticsData.map(item => item.orderCount || 0);
    myChart.setOption(option);
  }
</script>

<div class="w-full h-full" bind:this={chartDom}></div>
